<template>
    <el-form ref="form" :model="form" label-width="80px" style="padding:10px;">
        <el-form-item label="模型名称" prop="modelName">
          <el-input v-model="form.modelName" placeholder="请输入模型名称" />
        </el-form-item>
        <el-form-item label="模型描述" prop="modelDesc">
          <el-input v-model="form.modelDesc" placeholder="请输入模型描述" />
        </el-form-item>
        <el-divider content-position="center">模型字段详细信息</el-divider>
        <vxe-table
                border
                row-key
                keep-source
                :loading="loading"
                ref="xTable1"
                :data="modelColumnInfoList">              
              <vxe-table-column field="columnCode" title="列名" ></vxe-table-column>
              <vxe-table-column field="columnName" title="备注" show-overflow></vxe-table-column>               
              <vxe-table-column field="columnType" title="数据类型" :edit-render="{name: 'select', options: dict.type.sys_data_type}"></vxe-table-column>           
        </vxe-table>
    </el-form>

</template>

<script>
import { getBase } from "@/api/model/base";


export default {
    dicts: ['sys_data_type'],
    props: {
        modelId: {
            type: Number
        }
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            form:{},
            modelColumnInfoList: [],
        }
    },
    created() {
        this.getList();    
    },
    methods: {
        getList() {
            const modelId = this.modelId 
            getBase(modelId).then(response => {
                this.form = response.data;
                this.modelColumnInfoList = response.data.modelColumnInfoList;
                this.title = "修改模型基本信息";
                this.loading = false;
            });        
        }
    }
}

</script>
